<template>
	<view class="container">
		<!-- 此处改动, userifo-supplement 为新添加文件-->
		<!-- 个人信息补充 -->
		<view class="zanwei"></view>
		<view class="skip">
			<view class="skip-block"></view>
			<view class="skip-btn" @click="ship_btn()"><text>跳过</text> </view>
		</view>
		<view class="">
			<view class="test">让我更了解你</view>
			<view class="test2">完善信息直接影响任务的匹配</view>
			<view class="test3">换一个你的形象</view>
		</view>
		<!-- 头像 -->
		<view class="head-portrait" @click="touxiangClick">
			<!-- <canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d"  /> -->

			<image :src="image" class="image1" mode="aspectFill"></image>
		</view>
		<view class="foot-user">
			<view class="or-gender">请选择你的性别</view>
			<view class="Gender">
				<view class="nan gender" @click="genderClick(0)" :class="or_gender==0 ? 'nan-bg':''">
					<view class="gender-ctn">
						<text>男</text>
						<image
							:src="or_gender==0 ? 'http://images.linglinggong.net/userifo-supplement/nan.png':'http://images.linglinggong.net/userifo-supplement/nan2x.png'"
							mode="aspectFill" class="image"></image>
					</view>
				</view>
				<view class="nv gender" @click="genderClick(1)" :class="or_gender==1 ? 'nv-bg':''">
					<view class="gender-ctn">
						<text>女</text>
						<image
							:src="or_gender==1 ? 'http://images.linglinggong.net/userifo-supplement/nv.png':'http://images.linglinggong.net/userifo-supplement/nv2x.png'"
							mode="aspectFill" class="image"></image>
					</view>
				</view>
			</view>
			<view class="appellation">
				<view class="name">怎么称呼你</view>
				<view class="appellation-name">
					<input style="background: transparent;" type="text" value="" placeholder="填写姓名" v-model="name" />
					<view class="separate"></view>
					<text>{{gender}}</text>
				</view>
			</view>
		</view>
		<view class="" style="padding: 120rpx 0 ;" @click="OpenLG">
			<view class="zlg-btn " :class=" bgcolor ? 'zlg-btn-bg':'' ">进入找零工</view>
		</view>

	</view>

</template>

<script>
	var _this = this
	import {
		putb64
	} from '@/libs/unit.js'
	export default {
		data() {
			return {
				gender: "性别", //性别
				or_gender: '3', //0男
				image: "", //头像
				imgHide: true,
				name: "",
				bgcolor: false,
				avatar: '',
				uploadToken: '',
			}
		},
		methods: {
			// 跳过
			ship_btn() {
				uni.switchTab({
					url: "/pages/index/index",
				})
			},
			// 头像
			touxiangClick() {
				uni.navigateTo({
					url: "/pages/camera/idphoto/idphoto",
					animationType: 'fade-in',
					animationDuration: 100
				})
			},
			// 选择性别
			genderClick(i) {
				if (i == 0) {
					this.or_gender = 0
					this.gender = "先生"
				} else {
					this.or_gender = 1
					this.gender = "女士"
				}
			},
			// 进入零工
			OpenLG() {
				if (this.image == '') return uni.showToast({
					title: '头像不能为空~',
					icon: 'none'
				})
				if (this.gender == '性别') return uni.showToast({
					title: '请选择性别~',
					icon: 'none'
				})
				if (this.name == '') return uni.showToast({
					title: '请填写姓名~',
					icon: 'none'
				})
				let reg = /[\u4e00-\u9fa5]/
				if (!reg.test(this.name)) return uni.showToast({
					title: '姓名不能包含数字和字符~',
					icon: 'none'
				})

				this.uploadImgs(this.image)
				if (this.name != '' && this.image != '' && this.gender != '性别') {
					this.a()
					// 新增修改 106-109
					uni.setStorageSync("pics", this.image)
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					return uni.showToast({
						title: '请确认是否填写完整~',
						icon: 'none'
					})

				}
			},
			// 顺序依次执行
			async a() {
				await this.uploadImgs(this.image)
				// await this.upd_user()
				await this.getuserIfor()
			},
			// 获取七牛上传TOKEN
			async getUploadToken() {
				let res5 = await this.$fetch(this.$api.get_qiniu_token, {}, 'POST')
				uni.setStorageSync('uploadToken', res5.msg)
				this.uploadToken = uni.getStorageSync('uploadToken')
			},
			// 上传图片至七牛 拍照
			uploadImgs(base64) {
				uni.uploadFile({
					url: this.$api.uploadPic,
					name: 'file',
					filePath: base64,
					formData: {
						token: this.uploadToken
					},
					success: ({
						data
					}) => {
						data = JSON.parse(data)
						this.avatar = data.hash
						this.upd_user()
					}
				})


			},


			// 修改个人信息
			async upd_user(lat, lng, region) {
				let res = await this.$fetch(this.$api.upd_user, {
					userName: this.name,
					sex: this.or_gender == '0' ? '0' : '1',
					avatar: this.avatar
				}, 'POST')


			},
			// 获取用户信息
			async getuserIfor() {
				let res = await this.$fetch(this.$api.get_current_user, {}, 'GET')
				console.log(res, "获取用户信息");
			},
			updateUserImage(e) {
				// console.log(e, "eeeeeeeeeeeeeeeeeeeeeeeee");
				uni.setStorageSync("userInfo.user.avatarto", e)
				this.image=e

			}

		},
		updated() {
			if (this.name != '' && this.image != '' && this.gender != '性别') {
				this.bgcolor = true
			}
		},
		onLoad() {
			this.getUploadToken()
		},
		onShow() {
			this.image = uni.getStorageSync("idphoto")

		},


	}
</script>

<style scoped lang="less">
	.zanwei {
		width: 100vw;
		height: 88rpx;
		position: fixed;
		top: 0;
		background: #FFFFFF;
	}

	.container {
		height: 100vh;
		margin-top: 88rpx;
		background: #FFFFFF;

		&>.skip {
			height: 88rpx;

			view {
				display: inline-block;
			}

			.skip-block {
				width: 636rpx;
			}

			.skip-btn {
				margin: 22rpx 0;
				width: 84rpx;
				height: 44rpx;
				border: 1px solid #ABABAB;
				border-radius: 12rpx;

				&>text {
					width: 46rpx;
					height: 23rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ABABAB;
					margin: 11rpx 19rpx;
				}
			}
		}

		&>view {
			&>.test {
				text-align: center;
				margin: 40rpx auto;
				width: 332rpx;
				height: 53rpx;
				font-size: 50rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}

			&>.test2 {
				margin: auto;
				width: 418rpx;
				height: 27rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ABABAB;
				text-align: center;
			}

			&>.test3 {
				width: 195rpx;
				height: 26rpx;
				font-size: 27rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				margin: 120rpx auto 36rpx;


			}
		}

		&>.head-portrait {
			margin: auto;
			width: 200rpx;
			height: 200rpx;
			background-color: #F4F4F4;
			background-image: url(http://images.linglinggong.net/userifo-supplement/paishe2x.png);
			background-size: 80rpx 80rpx;
			background-position: 60rpx 60rpx;
			background-repeat: no-repeat;
			border-radius: 50%;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;

			&>.image1 {
				width: 200rpx;
				height: 200rpx;
			}
		}

		&>.foot-user {
			&>.or-gender {
				width: 193rpx;
				height: 26rpx;
				font-size: 27.5rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				margin: 120rpx auto 36rpx;
			}

			&>.Gender {
				.nan {
					margin: 0 80rpx 0 155rpx;
				}

				.gender {
					display: inline-block;
					width: 182rpx;
					height: 82rpx;
					border-radius: 12rpx;
					background: #F2F2F2;

					.gender-ctn {
						margin: 20rpx 57rpx;

					}

					.image {
						vertical-align: middle;
						width: 32rpx;
						height: 32rpx;
						padding-left: 10rpx;
					}

					text {
						display: inline-block;
						width: 27rpx;
						height: 29rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						// color: #000000;
					}
				}

				&>.nan-bg {
					color: #1CAAEA !important;
					background: rgba(28, 170, 234, 0.2);
					box-sizing: border-box;
					border: 1px solid #1CAAEA;
				}

				&>.nv-bg {
					background: rgba(249, 8, 101, 0.2);
					box-sizing: border-box;
					border: 1px solid #F90865;
					color: #F90865 !important;
				}

			}

			&>.appellation {
				.name {
					width: 140rpx;
					height: 26rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					margin: 120rpx auto 26rpx;
				}

				.separate {
					width: 1px;
					height: 28rpx;
					background: #ABABAB;
				}

				.appellation-name {
					width: 415rpx;
					height: 80rpx;
					background: #F2F2F2;
					border-radius: 12px;
					margin: auto;
					display: flex;
					justify-content: space-around;
					align-items: center;

					&>input {
						padding-left: 25rpx;
					}

					&>text {
						width: 80rpx;
						padding-left: 25rpx;
						padding-right: 25rpx;
					}
				}

			}
		}

		.zlg-btn {
			margin: auto;
			width: 690rpx;
			height: 88rpx;

			border-radius: 12rpx;
			line-height: 88rpx;
			text-align: center;
			background: #ABABAB;
			color: #FFFFFF;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
		}

		.zlg-btn-bg {
			background: #FCC928;
			color: #402110;
		}
	}
</style>
